import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";

const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper(1600);
scene.add(axesHelper);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(600, 300, 500);
scene.add(directionalLight);
// const am

//渲染器和相机
const width = 680;
const height = 480;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 40000);
camera.position.set(-3350, 3465, 3601);
camera.lookAt(440, 237, 268);

//加入一个圆柱体
const geometry = new THREE.CylinderGeometry(100, 100, 200, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true });
const cylinder = new THREE.Mesh(geometry, material);

const group = new THREE.Group();
group.add(cylinder);

const camera2 = new THREE.PerspectiveCamera(30, width / height, 100, 3000);
camera2.position.set(-1000, 0, 0);
// camera2.position.set(200, 200, 200);
camera2.lookAt(0, 0, 0);

camera2.updateMatrixWorld(true);
// 相机可视化
const helper = new THREE.CameraHelper(camera2);
group.add(helper);

// GUI界面控制改变的对象
const obj = {
  fov: 30,
  near: 60,
  far: 3000
};


scene.add(group);
// scene.add(camera);
const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(width, height);
document.getElementById("three").appendChild(renderer.domElement);

const gui = new GUI({
  container: document.getElementById("three")
}); //创建GUI对象
gui.add(obj, "fov", 0, 90).onChange(function (value) {
  camera2.fov = value;
  // 相机参数变化，注意camera和CameraHelper更新
  camera2.updateProjectionMatrix();
  helper.update();
});
gui.add(obj, "near", 1, 2000).onChange(function (value) {
  camera2.near = value;
  // 相机参数变化，注意camera和CameraHelper更新
  camera2.updateProjectionMatrix();
  helper.update();
});
gui.add(obj, "far", 50, 6000).onChange(function (value) {
  camera2.far = value;
  // 相机参数变化，注意camera和CameraHelper更新
  camera2.updateProjectionMatrix();
  helper.update();
});

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(440, 237, 268);
controls.update();
(function update() {
  renderer.render(scene, camera);
  requestAnimationFrame(update);
})();
